<template>
  <div class="addClassification">
    <div class="box" @click="$event.stopPropagation()">
      <div class="title">
        <h2>添加分类</h2>
        <div class="inp">
          <el-form ref="formRef" :rules="rules" :model="formModel">
            <el-form-item prop="cat_pid" label="分类父 ID">
              <el-input v-model="formModel.cat_pid" placeholder="请输入数字id" size="default"></el-input>
            </el-form-item>
            <el-form-item prop="cat_name" label="分类名称">
              <el-input v-model="formModel.cat_name" placeholder="请输入分类名称" size="default"></el-input>
            </el-form-item>
            <el-form-item prop="cat_level" label="分类层级">
              <el-input v-model="formModel.cat_level" placeholder="只支持数字0、1、2" size="default"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="but">
          <el-button>取消</el-button>
          <el-button type="primary" @click="ensure">确定</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { getAddClassification } from '@/api/addClassification'
const formRef = ref()
const formModel = ref(
  {
    cat_pid: 0,
    cat_name: '',
    cat_level: 0
  }
)
const rules = ref({
  cat_pid: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { required: true, pattern: /^\d+$/, message: '必须是数字', trigger: 'blur' }
  ],
  cat_name: [
    { required: true, message: '请输入分类名称', trigger: 'blur' }
  ],
  cat_level: [
    { required: true, message: '请输入分类名称', trigger: 'blur' },
    { required: true, pattern: /^\d+$/, message: '必须是数字', trigger: 'blur' }
  ]
})
const ensure = async () => {

  try {
    formRef.value.validate()
    const res = await getAddClassification({ ...formModel.value })
    console.log(res);

  } catch {

  }
}
</script>

<style scoped lang="scss">
.box {
  background: #fff;
  padding: 20px;
}
</style>
